<template>
	<view class="page_bg">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="top_nav">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
			<view class="cate">资讯</view>
		</view>
		<z-paging ref="paging" class="z_pag" v-model="news" @query="getNews" :empty-view-fixed="true" :fixed="false"
			:hide-loading-more-when-no-more-by-limit="5">
			<view class="list-item flex-row" v-for="item in news" :key="item._id" @click="checkDetail(item._id)">
				<view class="image_2">
					<u-image :src="item.avatar" :lazy-load="true" mode="aspectFill"></u-image>
				</view>
				<view class="right-group flex-col">
					<text class="text_1">{{item.title}}</text>
					<view class="bottom-group flex-row">
						<image src="/static/local/396f49ca8ad95619863067bb11d6cc28.png" class="image_4" />
						<text class="text_3">{{vk.pubfn.timeFormat(item._add_time,"yyyy-MM-dd")}}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				news: []
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getNews(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/articles/pub/getNewsList',
					title:'获取中...',
					data: { pageNo, pageSize },
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 查看发布详情
			checkDetail(id) {
				uni.vk.navigateTo('/pages/news/detail?id=' + id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		background-color: #ffffff;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.top_nav {
		padding-bottom: 24rpx;
		color: rgb(51, 51, 51);
		font-size: 34rpx;
		line-height: 41rpx;
		white-space: nowrap;
		background-color: rgb(255, 255, 255);
		// height: 88rpx;
		position: relative;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);

		.image_1 {
			left: 21rpx;
			top: 27rpx;
			width: 19rpx;
			height: 35rpx;
			position: absolute;
		}

		.cate {
			width: 100%;
			padding: 20rpx 0;
			color: rgb(51, 51, 51);
			font-size: 34rpx;
			font-weight: 500;
			line-height: 41rpx;
			white-space: nowrap;
			text-align: center;
		}
	}

	.z_pag {
		flex: 1;
	}

	.list-item {
		padding: 32rpx 20rpx 26rpx;
		border-bottom: 1px solid #F0F0F0;

		.image_2 {
			border-radius: 8rpx;
			width: 170rpx;
			height: 170rpx;
			overflow: hidden;

			.u-image {
				height: 100% !important;
			}
		}

		.right-group {
			margin-left: 20rpx;
			margin-right: 4rpx;
			flex: 1 1 auto;
			align-self: center;

			.text_1 {
				color: rgb(51, 51, 51);
				font-size: 30rpx;
				line-height: 35rpx;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.bottom-group {
				margin-top: 52rpx;
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;

				.image_4 {
					margin-top: 3rpx;
					width: 26rpx;
					height: 26rpx;
				}

				.text_3 {
					margin-left: 9rpx;
				}
			}
		}
	}
</style>
